import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* 布局组件 */
import Layout from '@/layout'

/**
 * 注意: 当子路由长度大于等于1时，会显示子菜单。
 * 详情见: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   如果设置为true，项将不会显示在侧边栏（默认为false）
 * alwaysShow: true               如果设置为true，将始终显示根菜单
 *                                如果未设置alwaysShow，并且项有多个子路由，
 *                                它将变为嵌套模式，否则不显示根菜单
 * redirect: noRedirect           如果设置noRedirect则在面包屑中不重定向
 * name:'router-name'             用于<keep-alive>的名字（必须设置！！！）
 * meta : {
    roles: ['admin','editor']    控制页面角色（可以设置多个角色）
    title: 'title'               显示在侧边栏和面包屑中的名称（推荐设置）
    icon: 'svg-name'/'el-icon-x' 显示在侧边栏中的图标
    breadcrumb: false            如果设置为false，项将在面包屑中隐藏（默认为true）
    activeMenu: '/example/list'  如果设置路径，侧边栏将高亮显示您设置的路径
  }
 */

/**
 * constantRoutes
 * 不需要权限要求的基础页面
 * 所有角色都可以访问
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
      }
    ]
  },
  {
    path: '/banner',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Banner',
        component: () => import('@/views/banner/index'),
        meta: { title: '轮播图管理', icon: 'banner' }
      }
    ]
  },
  {
    path: '/news',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'News',
        component: () => import('@/views/news/index'),
        meta: { title: '新闻管理', icon: 'news' }
      },
      {
        path: 'add',
        name: 'NewsAdd',
        component: () => import('@/views/news/add'),
        hidden: true,
        meta: { title: '新增新闻', activeMenu: '/news/index' }
      },
      {
        path: 'edit',
        name: 'NewsEdit',
        component: () => import('@/views/news/edit'),
        hidden: true,
        meta: { title: '编辑新闻', activeMenu: '/news/index' }
      }
    ]
  }
]

/**
 * asyncRoutes
 * 根据用户角色动态加载的路由
 */
export const asyncRoutes = [
  {
    path: '/application',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Application',
        component: () => import('@/views/application/index'),
        meta: { title: '申请管理', icon: 'application2', roles: ['admin'] }
      }
    ]
  },
  {
    path: '/users',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Users',
        component: () => import('@/views/users/index'),
        meta: { title: '操作员管理', icon: 'user', roles: ['admin'] }
      }
    ]
  },

  // 404页面必须放在最后！！！
  { path: '*', redirect: '/404', hidden: true }
]

// 创建并返回一个新的Router实例
const createRouter = () =>
  new Router({
    // 使用history模式需要服务器支持，这里注释掉是因为示例中未提及服务器配置
    // mode: 'history', // 需要服务支持
    // 指定页面滚动行为，当导航到新页面时，滚动条会回到顶部
    scrollBehavior: () => ({ y: 0 }),
    // 将路由配置设置为constantRoutes，这部分路由是固定的
    routes: constantRoutes
  })

// 调用createRouter函数初始化路由器
const router = createRouter()

// 重置路由匹配器，用于需要重置Vue实例场景，详情见链接
// 详情见: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  // 创建新的Router实例作为匹配器
  const newRouter = createRouter()
  // 重置当前路由器的匹配器为新实例的匹配器
  router.matcher = newRouter.matcher // 重置路由器
}

// 修复Vue-router的push方法的Promise处理，详见Vue-router文档
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  // 如果提供了回调函数，则按照原方法调用，以保持与旧版本的兼容性
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 如果没有提供回调函数，则执行原方法并捕获可能的错误
  return originalPush.call(this, location).catch((err) => err)
}

// 默认导出初始化好的router实例，供其他模块使用
export default router
